<template>
  <div class="table-con">
    <el-table
      :data="tableData"
      style="width: 100%"
      header-cell-class-name="table-header"
      row-class-name="table-row-low"
    >
      <el-table-column
        prop="pageName"
        :label="pageType === '1'?$t('dataAnalysis.visitPage'):$t('product.prodName')"
        fixed="left"
        width="300"
      >
        <template #default="scope">
          <span v-if="scope.row.pageName">
            {{ scope.row.pageName }}
          </span>
          <span v-else>
            {{ '-' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="isVisible1"
        prop="visis"
        :label="$t('dataAnalysis.pageviews')"
        sortable
      />
      <el-table-column
        v-if="isVisible2"
        prop="visitUser"
        :label="$t('dataAnalysis.numberOfVisitors')"
        sortable
      />
      <el-table-column
        v-if="isVisible3"
        prop="click"
        :label="$t('dataAnalysis.clicks')"
        sortable
      />
      <el-table-column
        v-if="isVisible4"
        prop="clickUser"
        :label="$t('dataAnalysis.clicksVisitors')"
        sortable
      />
      <el-table-column
        v-if="isVisible5"
        prop="clickRate"
        :label="$t('dataAnalysis.clicksRatio')"
        sortable
      />
      <el-table-column
        v-if="isVisible7"
        prop="averageStopTime"
        :label="$t('dataAnalysis.stayTime')"
        sortable
      />
      <el-table-column
        v-if="isVisible8"
        prop="shareVisit"
        :label="$t('dataAnalysis.shareTimes')"
        sortable
      />
      <el-table-column
        v-if="isVisible9"
        prop="shareVisitUser"
        :label="$t('dataAnalysis.sharePeopleTimes')"
        sortable
      >
        <!-- <template slot-scope="scope">
          <span>{{scope.row.singleProdRate}}%</span>
        </template>-->
      </el-table-column>
      <el-table-column
        v-if="isVisible10"
        prop="placeOrderAmount"
        :label="$t('dataAnalysis.gTOrderAmount')"
        sortable
      />
      <el-table-column
        v-if="isVisible11"
        prop="placeOrderUser"
        :label="$t('dataAnalysis.gTNumber')"
        sortable
      />
      <el-table-column
        v-if="isVisible12"
        prop="visitToPlaceOrderRate"
        :label="$t('dataAnalysis.bAOC')"
        sortable
      />
      <el-table-column
        v-if="isVisible13"
        prop="payAmount"
        :label="$t('dataAnalysis.gtPA')"
        sortable
      />
      <el-table-column
        v-if="isVisible14"
        prop="payUser"
        :label="$t('dataAnalysis.gPayNumber')"
        sortable
      />
      <el-table-column
        v-if="isVisible15"
        prop="visitToPayRate"
        :label="$t('dataAnalysis.gVToP')"
        sortable
      />
    </el-table>
  </div>
</template>

<script setup>
const props = defineProps({
  prodData: {
    type: Object,
    default: null
  },
  pageType: {
    type: String,
    default: '1'
  }
})

const tableData = ref(props.prodData.data)

watch(() => props.prodData, (newValue) => {
  tableData.value = newValue.data
  changVisibles()
}, { deep: true })

const isVisible1 = ref(false)
const isVisible2 = ref(false)
const isVisible3 = ref(false)
const isVisible4 = ref(false)
const isVisible5 = ref(false)
const isVisible7 = ref(false)
const isVisible8 = ref(false)
const isVisible9 = ref(false)
const isVisible10 = ref(false)
const isVisible11 = ref(false)
const isVisible12 = ref(false)
const isVisible13 = ref(false)
const isVisible14 = ref(false)
const isVisible15 = ref(false)

const judgeStrArrIncludeOtherString = (str) => {
  const strArr = props.prodData.sumData
  return strArr.includes(str)
}
/**
 * 控制表格列显隐
 */
const changVisibles = () => {
  isVisible1.value = judgeStrArrIncludeOtherString($t('dataAnalysis.pageviews'))
  isVisible2.value = judgeStrArrIncludeOtherString($t('dataAnalysis.numberOfVisitors'))
  isVisible3.value = judgeStrArrIncludeOtherString($t('dataAnalysis.clicks'))
  isVisible4.value = judgeStrArrIncludeOtherString($t('dataAnalysis.clicksVisitors'))
  isVisible5.value = judgeStrArrIncludeOtherString($t('dataAnalysis.clicksRatio'))
  isVisible7.value = judgeStrArrIncludeOtherString($t('dataAnalysis.stayTime'))
  isVisible8.value = judgeStrArrIncludeOtherString($t('dataAnalysis.shareTimes'))
  isVisible9.value = judgeStrArrIncludeOtherString($t('dataAnalysis.sharePeopleTimes'))
  isVisible10.value = judgeStrArrIncludeOtherString($t('dataAnalysis.gTOrderAmount'))
  isVisible11.value = judgeStrArrIncludeOtherString($t('dataAnalysis.gTNumber'))
  isVisible12.value = judgeStrArrIncludeOtherString($t('dataAnalysis.bAOC'))
  isVisible13.value = judgeStrArrIncludeOtherString($t('dataAnalysis.gtPA'))
  isVisible14.value = judgeStrArrIncludeOtherString($t('dataAnalysis.gPayNumber'))
  isVisible15.value = judgeStrArrIncludeOtherString($t('dataAnalysis.gVToP'))
}

</script>
<style scoped>
.table-con {
  margin-top: 20px;
  border: 1px solid #eee;
  border-bottom: none;
}
</style>
